<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <%@ include file="/common/dxp/include/common-base.jsp"%>
  <title>设备采集结果</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
</head>

<!-- Part 一、 以下是body主体内容的模块区域 -->
<body class="hold-transition ${sysColor} sidebar-mini">
<div class="wrapper">

  <!-- top start -->
  <%@include file="/common/dxp/top.jsp" %>
  <!-- top end -->
  <!-- left start -->
  <%@include file="/common/dxp/left.jsp" %>
  <!-- left end-->

  <div class="content-wrapper">
    <!-- Main start -->
	<section class="content">
	  			<div id="div_hidden_content" class="hidden" style="display:none;">
	  			    <input name="templateType" type="hidden" value="search"/>
                    <div id="hidden_common_final">
                        <!-- temp="hidden_common_final" start -->
										<input name="mainObjName" type="hidden" value="opcUaValue">
										<input name="mainObjPrimaryKey" type="hidden" value="infoId">
										<input name="objNameAll" type="hidden" value="opcUaValue">
				<!-- temp="hidden_common_final" end -->
                     </div>
	  			</div>
      <div class="row">
        <div class="col-xs-12">
        
          <!------搜索  start ------->
          <div class="box box-info">
             <!--搜索title  start --> 
	          <div class="box-header with-border">
                 <h3 class="box-title"><i class="fa fa-search"></i> 设备采集结果搜索</h3>
                 <div class="box-tools pull-right">
    				<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
 				 </div>
              </div>
            <!--搜索title  end --> 
            <div class="box-body">
            	<form id="searchForm" action="javascript:;">
	            	<!-- temp="searchForm_hidden" start -->
									<div id="searchForm_hidden" style="display:none;">
										<input type="hidden" name="pageName" value="opc-ua-value-td"/>
										<input type="hidden" name="formName" value="searchForm"/>
										<input type="hidden" name="orderBy" value="opcUaValue.create_time desc"/>
									</div>
				<!-- temp="searchForm_hidden" end -->

					<input type="hidden" name="opcUaValue.wb_createTime" value=""/>

	              	<!-- temp="searchForm_content" start -->
				<div id="searchForm_content" class="form-group"  data-temp-code="true" data-temp-type="searchForm" data-temp-form-id="searchForm">

					<table class="table table-bordered bordercolor">
						<tbody>
						<tr>
							<td class="active" align="right"><label
									class="form-control-static">设备名称：</label></td>
							<td>
								<div class="form-group"><select
										id="searchForm_opcUaValue_groupId"
										name="opcUaValue.w_groupId"
										class="form-control  clean"
										data-temp-obj="opcUaValue.groupId"
										data-dict-code="dymicSql" data-dict-cate=""
										data-colmun="{value:'infoId',text:'groupName'}"
										data-obj-name="opcUaGroups"
										data-page-name="opc-ua-groups"
										data-form-name="searchForm" data-condition=""
										data-type-tag="select" placeholder="必填项"
										data-bv-notempty="true"
										data-bv-notempty-message="不能为空" data-def="">
									<option value="">--请选择--</option>
								</select></div>
							</td>
							<td class="active" align="right"><label class="form-control-static">标记名称：</label></td>
							<td>
								<div class="form-group"><input name="opcUaValue.wl_identifier"
															   class="form-control clean" maxlength="30"
															   data-temp-obj="opcUaValue.identifier"></div>
							</td>
						</tr>
						<tr>
							<td class="active" align="right"><label
									class="form-control-static">发生时间：</label></td>
							<td colspan="3">
								<div class="form-group">
									<div class="input-group ">
										<input id="searchForm_input_startDate"  name="input_startDate" maxlength="30" class="form-control clean form_datetime" readonly="readonly" type="text">
										<span class="input-group-addon"> <i class="fa fa-calendar"></i></span>
										<span class="input-group-addon"> 至 </span>
										<input id="searchForm_input_endDate"  name="input_endDate" maxlength="30" class="form-control clean form_datetime" readonly="readonly" type="text">
										<span class="input-group-addon"> <i class="fa fa-calendar"></i></span>
									</div>
								</div>
							</td>
						</tr>
						</tbody>
					</table>
				</div>
				<!-- temp="searchForm_content" end -->
			  	</form>
			  <div class="box-footer text-center">
			       <button type="button" class="btn btn-success btn_search_rest" onclick="getTableDataSearch();"><i class="fa fa-search"></i> 查询</button> 
			       <button type="button" class="btn btn-warning btn_search_rest" onclick="mytools.cleanData('#searchForm');">重置 </button>
				  <button type="button" class="btn btn-primary" onclick="autoRefresh(this)">开启自动刷新</button>
			  </div>
            </div>
	     </div>
	     <!------- 搜索 end -------->
           
        <!------- 列表 start -------->
          <div class="box box-success">
            <!--列表title  start --> 
	          <div class="box-header with-border">
                 <h3 class="box-title"><i class="fa fa-table"></i> 查询结果 [共计<span id="dataListTotalCount">0</span>条数据]</h3>
                 <div class="box-tools pull-right">
    				<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
 				 </div>
              </div>
			  <div class="box-body">
              	 	<table id="dataList" class="table table-bordered table-hover">
              	 		<thead>
		                	<tr id="dataList_thead_content" data-temp-code="true" data-temp-type="table" data-temp-show="dataList_template_content">
			                	<th>序号</th>
			                	<!-- temp="dataList_thead_content" start -->

											<th data-temp-obj="opcUaValue.infoId">设备名称</th>
											<%--<th data-temp-obj="opcUaValue.nodeName">标记名称</th>--%>
											<th data-temp-obj="opcUaValue.identifier">标记名称</th>
								<th data-temp-obj="opcUaValue.value">数据值</th>
								<th data-temp-obj="opcUaValue.createTime">发生时间</th>
<%--											<th>操作</th>--%>
				<!-- temp="dataList_thead_content" end -->
		                	</tr>
	                	</thead>
		                <tbody id="dataList-body">
		                	
		                </tbody>
	              </table>
            	</div>
           	 	
           	 	<div class="box-footer text-center">
                    <div class="pagination-box">
                        <ul id="dataList-page" class="pagination">
                        </ul>
					</div>
			 	</div>
           </div>
        <!------- 列表 end -------->
        </div>
      </div>
  

<!-- Part 二、以下是template模板定义的模块区域 -->
<script type="text/template" id="dataList-template">
		<? for ( var i = 0; i < rows.length; i++) {?>
		<tr>
				<td><?=(pageObj.currentPage-1)*pageObj.rows+(i+1)?></td>
			<!-- temp="dataList_template_content" start -->
				<%--<td><?=strUtil.doNull(rows[i].opcUaGroups.groupName,'')?></td>--%>
			<td><?=dictListMap["opc-ua-groups-searchForm"][rows[i].opcUaValue.groupId]?></td>
				<%--<td><?=strUtil.doNull(rows[i].opcUaItems.nodeName,'')?></td>--%>
				<td><?=strUtil.doNull(rows[i].opcUaValue.identifier,'')?></td>
			<td><?=strUtil.doNull(rows[i].opcUaValue.value,'')?></td>
			<? if(rows[i].opcUaValue.createTime.length>13){?>
			<td><?=new Date(rows[i].opcUaValue.createTime*1/1000).format('yyyy-MM-dd hh:mm:ss:S')?></td>
			<?} else {?>
			<td><?=new Date(rows[i].opcUaValue.createTime*1).format('yyyy-MM-dd hh:mm:ss:S')?></td>
			<?}?>
				<!-- temp="dataList_template_content" end -->
		</tr>
   <?}?>  		
</script>

<!-- Part 三、 以下是js模块区域 -->
<script>
var clickMenu = "opc-collect-res";
var myPage,dataListId,searchFormId;
myPage = 20;//定义列表数据
dataListId = "dataList";//显示列表数据div的id
searchFormId = "searchForm";//搜索表单Id
/**
 * 初始化数据字典，id传入#id 返回值Map用法：dictListMap["userType"][rows[i].userType]
 */
var dictListMap = DictUtil.initDictAndDymic();
 
$(function () {
	var date = new Date(); //日期对象
	date.setHours (date.getHours () - 2);
	var timeStamp = date;
	$("#searchForm_input_startDate").val(timeStamp.format("yyyy-MM-dd hh:mm:ss"));
	//1、加载分页列表数据
	getTableDataSearch();
	//2、控制是否启用token
	//setToken();
	
 });


 $(function () {
	//设置数据行选中效果
	$('#'+dataListId+' tbody').on('click','tr', function (e) {
	     if ( $(this).hasClass('selected') ) {
	        }
	        else {
	            $('tr.selected').removeClass('selected');
	            $(this).addClass('selected');
	        }
	     //var id = $('tr.selected th').eq(0).html();
	} );
 });
//注入日历框样式
var dateObject = $('.datepicker').datepicker( {
	language : 'zh-CN',
	//inline: true,
	todayBtn : "linked",
	format : "yyyy-mm-dd",
	autoclose: true
});
//注入日历框样式
$('.form_datetime').datetimepicker({
	// container: ".modal-content",
	format: 'yyyy-mm-dd hh:ii:ss',
	/* minView: "month",  *///选择日期后，不会再跳转去选择时分秒
	language: 'zh-CN',
	dateFormat: 'yyyy-mm-dd',//日期显示格式
	timeFormat: 'HH:mm:ss',//时间显示格式
	todayBtn: 1,
	autoclose: 1,
	minView: 0,  //0表示可以选择小时、分钟   1只可以选择小时
	minuteStep: 3,//分钟间隔1分钟
	endDate: new Date()
});

function getTableDataSearch() {
	var endDataStr = $("#searchForm_input_endDate").val();
	var startDataStr=$("#searchForm_input_startDate").val();
	var searchTime = "";
	if(strUtil.isNull(startDataStr) && !strUtil.isNull(endDataStr)){
		var endDataLong = new Date((endDataStr)).getTime();
		searchTime="-,"+endDataLong;
	}else if(!strUtil.isNull(startDataStr) && strUtil.isNull(endDataStr)){
		var startDataLong = new Date((startDataStr)).getTime();
		searchTime=startDataLong+","+new Date().getTime();
	}else if(!strUtil.isNull(startDataStr) && !strUtil.isNull(endDataStr)){
		var startDataLong = new Date((startDataStr)).getTime();
		var endDataLong = new Date((endDataStr)).getTime();
		searchTime=startDataLong+","+endDataLong;
	}
	$("#"+searchFormId).find("input[name='opcUaValue.wb_createTime']").val(searchTime);
	console.log('search_date',searchTime);
	getTableData();
}

//加载列表数据
function getTableData(){
    // if(strUtil.isNull($("#"+searchFormId).find("input[name='pageName']").val())){return;}
    var index_load = layer.msg("正在加载数据...");
	$.ajax({
		   type:'get',
		   url:common_list_url,
		   data:$("#"+searchFormId).serialize()+getCurrentPage(common_list_url+"?"+$("#"+searchFormId).serialize(),myPage),
		   dataType:'json',
		   success: function(myData){
		   	console.log(myData);
			   $("#dataListTotalCount").text(myData.total);
			    var data = baidu.template(dataListId+"-template",eval(myData));
				$("#"+dataListId+"-body").html(data);
				  var option= {
						   ele:$("#"+dataListId+"-page")[0],
						   total:myData.total,
						   //pageList:[10,20,50],//分页条数控制
						   fn:getTableData,
						   url:common_list_url+"?"+$("#"+searchFormId).serialize()
					   };
					generatePages(option);
					layer.close(index_load);
			   }
		});	
  }


//刷新
var timeObj = null;
function autoRefresh(obj){
	if($(obj).hasClass('btn-primary')){
		timeObj = setInterval(function() {
			// getTableData();
			getTableDataSearch();
		}, (2000));
		$(obj).removeClass('btn-primary').addClass('btn-danger');
		$(".btn_search_rest").addClass("hidden");
		$(obj).text('停止自动刷新');
	}else{
		clearInterval(timeObj);
		$(obj).removeClass('btn-danger').addClass('btn-primary');
		$(".btn_search_rest").removeClass("hidden");
		$(obj).text('开启自动刷新');
	}
}
//设置token
function setToken(){
	$.ajax({
	    type:'get',
	    url:'${ctx}/sendPage/token?token=true',
	    dataType:'text',
	    success: function(myData){
	    	console.log(myData);
			$('.formToken').val(myData);
	  	}
	});	
}


</script>
</section>
<!-- Main end -->   
</div>
<!-- foot start -->
<%@include file="/common/dxp/foot.jsp" %>
<!-- foot start -->
</div>
<!-- /.content-wrapper -->
</body>
</html>






